import { Routes, Route, Navigate } from 'react-router-dom'
import { Suspense, lazy } from 'react'
import { Spin } from 'antd'
import { CustomerProvider } from './context/CustomerContext'
import WebSocketMonitorPage from './pages/WebSocketMonitorPage'
import ProtectedRoute from './components/ProtectedRoute'

// 懒加载页面组件
const Dashboard = lazy(() => import('./pages/Dashboard'))
const ConversationPage = lazy(() => import('./pages/ConversationPage'))
const ClientTestPage = lazy(() => import('./pages/ClientTestPage'))
const ManagerLoginPage = lazy(() => import('./pages/ManagerLoginPage'))

// 加载中组件
const LoadingSpinner = () => (
  <div className="flex flex-col items-center justify-center min-h-screen">
    <Spin size="large" />
    <div className="mt-3 text-gray-600">加载中...</div>
  </div>
)

function App() {
  return (
    <div className="App">
      <CustomerProvider>
        <Suspense fallback={<LoadingSpinner />}>
          <Routes>
            <Route path="/" element={<Navigate to="/login" replace />} />
            <Route path="/login" element={<ManagerLoginPage />} />
            <Route path="/model-day" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } />
            <Route path="/tools-library" element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } />
            <Route path="/analytics" element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } />
            <Route path="/settings" element={
              <ProtectedRoute>
                <Dashboard />
              </ProtectedRoute>
            } />
            <Route path="/conversation" element={
              <ProtectedRoute>
                <ConversationPage />
              </ProtectedRoute>
            } />
            <Route path="/client-test" element={
              <ProtectedRoute>
                <ClientTestPage />
              </ProtectedRoute>
            } />
            <Route path="/websocket-monitor" element={<WebSocketMonitorPage />} />
            <Route path="*" element={<Navigate to="/login" replace />} />
          </Routes>
        </Suspense>
      </CustomerProvider>
    </div>
  )
}

export default App 